<template>
	<!-- 城市选择-->
	<view class="city-select">
			<!-- 预留搜索-->
			<view class="city-serach" v-if="isSearch" style="position: fixed;width: 100%;z-index: 999999999999999;top: 0;height: auto;"><input @input="keyInput" :placeholder="placeholder"
					class="city-serach-input" />
					<image class="suos"  src="../../static/pages/sousuo@2x.png" mode=""></image>
					</view>
			<!-- 当前定位城市 -->

		<scroll-view :scroll-top="scrollTop" v-if="!serachCity" :style="{height: scollHeight+'px'}" scroll-y="true" class="city-select-main" id="city-select-main"
			:scroll-into-view="toView" style="fixed;top: 56px;">
			<view class="citys"   >
				<view v-for="(city, index) in sortItems" :key="index" v-show="city.isCity" class="citys-row">
					<view class="citys-item-letter" :id="'city-letter-' + (city.name === '#' ? '0' : city.name)">
						</view>
					<view class="citys-item ddlb"  v-for="(item, inx) in city.citys" :key="inx"
						style="line-height: 1.6;">
						<view class="" @click="cityTrigger(item)">
							<view class="qcfd">
								<view  class="fl" style="font-size: 36rpx;font-weight: 500;color: #2C2C2D;">
									 {{item.cityName ==null?'- -':item.cityName}}
								</view>
								<view  v-if="item.receiverPhone !==null" class="fl" style="margin-left: 8rpx;font-size: 32rpx;color: #7B7B7B;margin-top: 8rpx;">
									 {{item.oldData.receiverPhone==null?'- -':item.oldData.receiverPhone}}
								</view>
								
							</view>
							<view  v-if="item.oldData.province==null" class="" style="margin:16rpx 0;text-align: left;">
								 {{item.oldData.address}}
							</view>
							<view v-else    class="" style="margin:16rpx 0;text-align: left;">
								 {{item.oldData.province}}{{item.oldData.city}}{{item.oldData.area}}{{item.oldData.address}}
							</view>
						</view>
						<view class="line">
						</view>
						<view class="qcfd">
							<view class="fl qcfd" style="margin:14rpx 0;"  @tap.native.stop="xgnmb(item)">
								<view class="fr" style="font-size: 24rpx;margin-left: 10rpx;">
									修改
								</view>
								<view class="fl">
									<image style="width: 30rpx;height: 30rpx;"
										src="/static/pages/xiugai.png" mode=""></image>
								</view>
							</view>
							<view class="fl qcfd" style="margin:14rpx 48rpx;" @tap.native.stop="deleteinfo(item)">
								<view class="fr" style="font-size: 24rpx; margin-left: 10rpx;">
									删除
								</view>
								<view class="fl">
									<image style="width: 30rpx;height: 30rpx;"
										src="/static/pages/delete.png" mode=""></image>
								</view>

							</view>
						</view>

					</view>
				</view>
			</view>
			</scroll-view>
			<!-- 城市列表(搜索后)  -->
			<scroll-view v-if="serachCity" :scroll-top="scrollTop" scroll-y="true" class="city-select-main" id="city-select-main"
				:scroll-into-view="toView"  style="height: 1260rpx;position: fixed;top: 67px;">
			<view class="citys" >
				<view v-for="(item, index) in searchDatas"  @click="cityTrigger(item)" :key="index" class="citys-row ddlb"
					style="line-height: 1.6;">
					<!-- <view class="citys-item" :key="inx" @click="cityTrigger(item)">{{ item.name }}</view>
					<view class="citys-item-letter" :id="'city-letter-' + (city.name === '#' ? '0' : city.name)">
						{{ city.name }}
					</view> -->

					<view class="" @click="cityTrigger(item)">
						<view class="qcfd">
							<view class="fl"  style="font-size: 36rpx;font-weight: 500;color: #2C2C2D;">
								 {{item.name==null?'- -':item.name}}
							</view>
							<view class="fl" style="margin-left: 8rpx;font-size: 32rpx;color: #7B7B7B;margin-top: 8rpx;">
								 {{item.oldData.receiverPhone==null?'- -':item.oldData.receiverPhone}}
							</view>
						</view>
						<view v-if="item.oldData.province==null"   class="" style="margin:16rpx 0;text-align: left;">
							 {{item.oldData.address}}
						</view>
						<view v-else class="" style="margin:16rpx 0;text-align: left;">
							 {{item.oldData.province}}{{item.oldData.city}}{{item.oldData.area}}{{item.oldData.address}}
						</view>
					</view>
					<view class="line">
					</view>
					<view class="qcfd">
						<view class="fl qcfd" style="margin:14rpx 0;" @tap.native.stop="xgnmb(item)">
							<view class="fr" style="font-size: 24rpx;margin-left: 4rpx;">
								修改
							</view>
							<view class="fl">
								<image style="width: 30rpx;height: 30rpx;" src="/static/pages/xiugai.png"
									mode=""></image>
							</view>
						</view>
						<view class="fl qcfd" style="margin:14rpx 48rpx;" @tap.native.stop="deleteinfo(item)">
							<view class="fr" style="font-size: 24rpx; margin-left: 10rpx;">
								删除
							</view>
							<view class="fl">
								<image style="width: 30rpx;height: 30rpx;"
									src="/static/pages/delete.png" mode=""></image>
							</view>
						</view>
					</view>

				</view>
			</view>
		</scroll-view>
		<!-- 城市选择索引-->
		<view class="city-indexs-view" v-if="!serachCity">
			<view class="city-indexs">
				<view v-for="(cityIns, index) in handleCity" class="city-indexs-text" v-show="cityIns.isCity"
					:key="index" @click="cityindex(cityIns.forName)">
					{{ cityIns.name }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import citySelect from './citySelect.js';

	export default {
		props: {
			//查询提示文字
			placeholder: {
				type: String,
				default: '请输入收货人、手机号、地址搜索'
			},
			//传入要排序的名称
			formatName: {
				type: String,
				default: 'cityName'
			},
			//当前定位城市

			//热门城市
			hotCity: {
				type: Array,
				default: () => []
			},
			//城市数据
			obtainCitys: {
				type: Array,
				default: () => []
			},
			//是否有搜索
			isSearch: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				toView: 'city-letter-Find', //锚链接 初始值
				scrollTop: 0, //scroll-view 滑动的距离
				cityindexs: [], // 城市索引
				activeCityIndex: '', // 当前所在的城市索引
				handleCity: [], // 处理后的城市数据
				serachCity: '', // 搜索的城市
				cityData: [],
				activeCity: '请选择市场',
				qty: '',
				shipId: '',
				deliveryId: '',
				payer: '',
				ps_type: '2',
				scollHeight:0
			};
		},
		
		
		computed: {
			/**
			 * @desc 城市列表排序
			 * @return  Array
			 */
			
			
			sortItems() {
				for (let index = 0; index < this.handleCity.length; index++) {
					if (this.handleCity[index].isCity) {
						let cityArr = this.handleCity[index].citys;
						cityArr = cityArr.sort(function(a, b) {
							var value1 = a.unicode;
							var value2 = b.unicode;
							return value1 - value2;
						});
					}
				}
				return this.handleCity;
			},
			/**
			 * @desc 搜索后的城市列表
			 * @return Array
			 */
			searchDatas() {
				
				var searchData = [];
				for (let i = 0; i < this.cityData.length; i++) {
				let allarea=this.cityData[i]['province']+this.cityData[i]['city']+this.cityData[i]['area']+this.cityData[i]['address']
					if (this.cityData[i]['receiverPhone'] !==null&&this.cityData[i]['receiverPhone'].indexOf(this.serachCity) !== -1) {
						searchData.push({
							oldData: this.cityData[i],
							name: this.cityData[i][this.formatName]
						});
					}else if(this.cityData[i]['receiver'] !==null&&this.cityData[i]['receiver'].indexOf(this.serachCity) !== -1){
						searchData.push({
							oldData: this.cityData[i],
							name: this.cityData[i][this.formatName]
						});
					} else if(allarea.indexOf(this.serachCity) !== -1){
						searchData.push({
							oldData: this.cityData[i],
							name: this.cityData[i][this.formatName]
						});
					}
				}
				
				

				
				
				
				return searchData;
			}
		},
		created() {
			let _that=this
			uni.getSystemInfo({
				 success: function (res) {
				        
				        
				   _that.scollHeight =res.windowHeight-120
				   
				    }
			})
			// 初始化城市数据
			this.cityData = this.obtainCitys;
			this.initializationCity();
			this.buildCityindexs();
		},
		watch: {
			obtainCitys(newData) {
				
				this.updateCitys(newData);
			}
		},
		mounted() {
			this.activeCity = uni.getStorageSync("actcitys").name
			this.shipId = uni.getStorageSync('fhrid')
		},
		methods: {
			deleteinfo(item){
				this.$emit('dele',item)
			},
			xgnmb(item){
		console.log('xgffa',item)
				this.$emit('xgdata',item)
			},
			radiochange(evt) {
				this.payer = evt.target.value
			},
			/**
			 * @desc 初始化
			 */
			updateCitys(data) {
				if (data) {
					this.cityData = data;
					this.initializationCity();
					this.buildCityindexs();
				}
			},
			// printAge(age){
			//            console.log('1232',age); 
			// 		this.activeCity=age.name
			// 		uni.setStorageSync('actcitys', age);
			// 	uni.switchTab({
			// 		url:'../index/index'
			// 	})
			//        },

			/**
			 * @desc 监听输入框的值
			 */
			keyInput(event) {
				this.serachCity = event.detail.value;
			},
			/**
			 * @desc 初始化城市数据
			 * @return undefind
			 */
			initializationCity() {
				this.handleCity = [];
				const cityLetterArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q',
					'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '#'
				];
				for (let index = 0; index < cityLetterArr.length; index++) {
					this.handleCity.push({
						name: cityLetterArr[index],
						isCity: false, // 用于区分是否含有当前字母开头的城市
						citys: [], // 存放城市首字母含是此字母的数组
						forName: 'city-letter-' + (cityLetterArr[index] == '#' ? '0' : cityLetterArr[
							index]) //label的绑定
					});
				}
			},
			/**
			 * @desc 得到城市的首字母
			 * @param str String
			 */
			getLetter(str) {
				return citySelect.getFirstLetter(str[0]);
			},
			/**
			 * @desc 构建城市索引
			 * @return undefind
			 */
			buildCityindexs() {
				this.cityindexs = [];
				for (let i = 0; i < this.cityData.length; i++) {
					// 获取首字母
					const cityLetter = this.getLetter(this.cityData[i][this.formatName]).firstletter;
					// 获取当前城市首字母的unicode，用作后续排序
					const unicode = this.getLetter(this.cityData[i][this.formatName]).unicode;

					const index = this.cityIndexPosition(cityLetter);
					if (this.cityindexs.indexOf(cityLetter) === -1) {
						this.handleCity[index].isCity = true;
						this.cityindexs.push(cityLetter);
					}

					this.handleCity[index].citys.push({
						cityName: this.cityData[i][this.formatName],
						unicode: unicode,
						oldData: this.cityData[i]
					});
				}
			},
			/**
			 * @desc 滑动到城市索引所在的地方
			 * @param id String 城市索引
			 */
			cityindex(id) {
				this.toView = id;
				// //创建节点查询器
				// const query = uni.createSelectorQuery().in(this)
				// var that = this
				// that.scrollTop = 0
				// //滑动到指定位置(解决方法:重置到顶部，重新计算，影响:页面会闪一下)
				// setTimeout(() => {
				// 	query
				// 		.select('#city-letter-' + (id === '#' ? '0' : id))
				// 		.boundingClientRect(data => {
				// 			// console.log("得到布局位置信息" + JSON.stringify(data));
				// 			// console.log("节点离页面顶部的距离为" + data.top);
				// 			data ? (that.scrollTop = data.top) : void 0
				// 		})
				// 		.exec()
				// }, 0)
			},
			/**
			 * @desc 获取城市首字母的unicode
			 * @param letter String 城市索引
			 */
			cityIndexPosition(letter) {
				if (!letter) {
					return '';
				}
				const ACode = 65;
				return letter === '#' ? 26 : letter.charCodeAt(0) - ACode;
			},
			/** @desc 城市列表点击事件
			 *  @param Object
			 */
			cityTrigger(item) {
				// 传值到父组件
				console.log(JSON.stringify(item))
				this.$emit('cityClick', item.oldData ? item.oldData : item);
			},

		}
	};
</script>

<style lang="scss">
	//宽度转换vw
	@function vww($number) {
		@return ($number / 375) * 750+rpx;
	}

	view {
		box-sizing: border-box;
	}

	.qd button {
		margin-left: 32rpx;
		padding: 0 24rpx !important;
		background-color: #007AFF !important;
		font-size: 24rpx;
		color: #FFFFFF;
		border-radius: 28rpx !important;
	}

	.city-serach {
		background-color: #FFFFFF;
		padding: 16rpx 24rpx;
		border-bottom: 1rpx solid #E1E1E1;
		// &-input {
		// 	height: 72rpx;
		// 	border-radius: 36rpx;
			
		// 	background-color: #F4F3F3;
			
		// 	padding-left: 80rpx;
		// 	outline: none;
		// 	font-size: 26rpx;
		// }
	}

	.goods_num {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
	}

	.goods_num .jians {
		line-height: 48rpx;
		font-size: 26rpx;
		color: #7B7B7B;
		margin-right: 26rpx;
	}

	.pay_type label {
		margin-right: 24rpx;
		font-size: 24rpx;
	}

	.pay_type label radio {
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
	}

	.citys {
		padding: 10rpx 24rpx 20rpx;
		
	}


	.city-select-main {
		position: relative;
		// overflow: scroll;
		// -webkit-overflow-scrolling: touch;
		width: 100%;
		height: 100%;
		background: #F4F3F3;
		// overflow-y: auto;
	}

	.ddlb {
		background: #FFFFFF;
		padding: 24rpx 20rpx 0;
		color: #2C2C2D;
		margin-top: 16rpx;
		border-radius: 16rpx;
	}


	.line {
		margin: 22rpx 0px 4rpx;
		width: 654rpx;
		height: 1rpx;
		
		box-sizing: border-box;
		background-color: #E9E9E9;
	}

	.city-select {
		position: relative;
		width: 100vw;
		height: 100vh;
		background: #F4F3F3;

		// 热门城市
		.hot-title {
			padding: 20rpx 24rpx;
			width: 100vw;
			font-size: 28rpx;
			color: #9b9b9b;
		}

		.hot-city {

			.hot-item {
				width: 306rpx;
				margin: 0 24rpx 48rpx;
				padding: 18rpx 24rpx;
				background-color: #FFFFFF;
				border-radius: 8rpx;
				font-size: 32rpx;
				color: #2C2C2D;
			}

			.hot-item image {
				width: 28rpx;
				height: 32rpx;
			}

			.hot-hidden {
				display: none;
				margin-right: 0;
			}
		}

		.citys {
			.citys-row {
				width: 100%;
				font-size: 28rpx;

				.citys-item-letter {
					margin-left: vww(-18);
					padding-left: vww(18);
					margin-top: -2rpx;
					width: 100vw;
					line-height: vww(30);
					color: #9b9b9b;
					background: #F4F3F3;
					border-top: none;
				}

				.citys-item {
					width: 100%;
					line-height: vww(50);
					color: #4a4a4a;
					border-bottom: 2rpx solid #ebebf0;

					&:last-child {
						border: none;
					}
				}
			}
		}

		.city-indexs-view {
			position: absolute;
			right: 0;
			top: 0;
			display: flex;
			width: vww(20);
			height: 100%;
			text-align: center;

			.city-indexs {
				width: vww(20);
				text-align: center;
				vertical-align: middle;
				align-self: center;

				.city-indexs-text {
					margin-bottom: vww(10);
					width: vww(20);
					font-size: 22rpx;
					color: #7B7B7B;

					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}
	
	.suos{
		position: absolute;
		width: 24px;
		height: 24px;
		top: 50%;
		transform: translateY(-50%);
		left: 45rpx;
	}
</style>
